<!--
 * @Description: 
 * @Date: 2024-01-25 08:44:11
 * @LastEditTime: 2024-04-24 17:33:39
-->
<!--
 * @Description: 
 * @Date: 2023-12-19 09:29:41
 * @LastEditTime: 2023-12-21 17:19:09
-->
<template>
  <div class="home">
    <div class="logout" @click="logout">退出登录</div>
    <div class="card">
      <el-carousel
        style="width: 50%"
        height="700px"
        type="card"
        arrow="never"
        indicator-position="none"
        motion-blur
      >
        <el-carousel-item>
          <div class="col-md-3">
            <div class="move">
              <img src="../assets/images/sy1.png" width="100%" />
            </div>
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <div class="col-md-3">
            <div class="move">
              <img src="../assets/images/sy2.png" width="100%" />
            </div>
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <div class="col-md-3">
            <div class="move">
              <img src="../assets/images/sy3.png" width="100%" />
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
      <!-- <div class="col-md-3" style="margin-top: 5%">
        <div class="move">
          <img src="../assets/images/sy2.png" width="100%" />
        </div>
      </div>
      <div class="col-md-3">
        <div class="move">
          <img src="../assets/images/sy3.png" width="100%" />
        </div>
      </div> -->
    </div>
    <div style="display: flex; align-items: center; justify-content: center">
      <img
        src="../assets/images/bt1.png"
        width="300px"
        style="cursor: pointer"
        @click="iconSkip('数据大屏')"
      />
      <img
        src="../assets/images/bt3.png"
        width="300px"
        style="cursor: pointer"
        @click="iconSkip('管理系统')"
      />
      <img
        src="../assets/images/bt2.png"
        width="300px"
        style="cursor: pointer"
        @click="iconSkip('人大官网')"
      />
    </div>
    <!-- <div class="home-header">
      <p>智慧人大数字化平台</p>
    </div>
    <div class="home-content">
      <div class="content-menu">
        <div>
          <div
            v-for="(item, index) in titles"
            :key="index"
            class="content-menu-item animate__animated animate__backInDown"
            @click="handleSkip(item.url)"
          >
            <img :src="item.src" />
            <p>{{ item.title }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="home-bottom">
      <div>
        <div
          v-for="(item, index) in icons"
          :key="index"
          class="animate__animated animate__backInUp"
          @click="iconSkip(item.title)"
        >
          <img :src="item.src" />
          <p>{{ item.title }}</p>
        </div>
      </div>
    </div> -->
    <!-- <div class="home-header">
      <div class="home-header-left animate__animated animate__backInLeft">
        <img src="../assets/images/guohui.png" />
        <span>富县人大</span>
      </div>
      <div class="home-header-right animate__animated animate__backInRight">
        <div>当前用户:{{ name }}</div>
        <div @click="drawer = true">消息提醒</div>
        <div @click="handleSkip('/system/user')">系统提醒</div>
        <div @click="logout">退出登录</div>
      </div>
    </div>
    <div class="home-title animate__animated animate__backInDown">
      <img src="../assets/images/newloginlogo.png" />
    </div>
    <div class="home-menu animate__animated animate__backInUp">
      <el-row :gutter="80" style="text-align: center">
        <el-col :sm="24" :md="8" :lg="8">
          <img
            src="../assets/images/dbxx.png"
            @click="handleSkip('/dbxx/dbxxStatistics')"
          />
        </el-col>
        <el-col :sm="24" :md="8" :lg="8">
          <img
            src="../assets/images/jylz.png"
            @click="handleSkip('/jylz/jylzExamine')"
          />
        </el-col>
        <el-col :sm="24" :md="8" :lg="8">
          <img
            src="../assets/images/zhbg.jpg"
            @click="handleSkip('/system/user')"
          />
        </el-col>
      </el-row>
    </div>
    <el-drawer title="消息提示" :visible.sync="drawer" :with-header="false">
      <span>消息提示!</span>
    </el-drawer> -->
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import autofit from "autofit.js";
import sy1 from "../assets/images/sy1.png";
import sy2 from "../assets/images/sy2.png";
import sy3 from "../assets/images/sy3.png";

export default {
  computed: {
    ...mapGetters(["sidebarRouters", "name"]),
  },
  name: "Index",
  data() {
    return {
      // 版本号
      version: "0.8.3",
      drawer: false,
      titles: [
        {
          title: "代表信息",
          src: require("../assets/images/tu1.png"),
          url: "/dbxx/dbxxStatistics",
        },
        {
          title: "建议履职",
          src: require("../assets/images/tu2.png"),
          url: "/jylz/jylzExamine",
        },
        {
          title: "综合办公",
          src: require("../assets/images/tu3.png"),
          url: "/system/user",
        },
      ],
      icons: [
        { title: "数据大屏", src: require("../assets/images/icon0.png") },
        { title: "消息通知", src: require("../assets/images/icon1.png") },
        { title: "系统设置", src: require("../assets/images/icon2.png") },
        { title: "退出登录", src: require("../assets/images/icon3.png") },
      ],
      scale: 1,
    };
  },
  mounted() {
    autofit.init({
      dh: 1080,
      dw: 1920,
      el: ".home",
      resize: true,
    });
  },
  methods: {
    handleMouseover(id) {
      let dom = document.getElementById(id);
      this.scale = 1.5;
      // dom.style.marginBottom = "2%";
    },
    handleMouseout(id) {
      let dom = document.getElementById(id);
      // dom.style.marginBottom = "0";
      this.scale = 1;
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
    handleSkip(value) {
      this.$router.push(value);
    },
    iconSkip(value) {
      switch (value) {
        case "数据大屏":
          this.$router.push("/web");
          break;
        case "人大官网":
          window.open("http://www.yasrd.gov.cn/", "_blank");
          break;
        case "管理系统":
          this.$router.push("/workspace");
          break;
      }
    },
    async logout() {
      this.$confirm("确定注销并退出系统吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.dispatch("LogOut").then(() => {
            location.href = process.env.VUE_APP_CONTEXT_PATH + "index";
          });
        })
        .catch(() => {});
    },
    skipSystem() {
      // this.$router
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: url("../assets/images/bg.png") no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  &-header {
    width: 100%;
    height: 80px;
    background: url("../assets/images/header.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    color: #fff;
    font-size: 26px;
    font-weight: bold;
    & > p {
      letter-spacing: 5px;
      margin-top: 20px;
    }
  }
  &-content {
    width: 100%;
    flex: 1;
    background: url("../assets/images/tiao.png");
    background-size: 100% 20%;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    .content-menu {
      width: 80%;
      height: 80%;
      padding: 0 40px;
      background: url("../assets/images/kuang.png") no-repeat;
      background-size: 100% 100%;

      display: flex;

      align-items: center;
      & > div {
        width: 100%;
        display: flex;
        justify-content: space-evenly;
        .content-menu-item {
          width: 280px;
          height: 370px;
          position: relative;
          img {
            width: 100%;
            height: 100%;
          }
          p {
            font-size: 24px;
            font-weight: bold;
            color: #fff;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 22%;
          }
        }
      }
    }
  }
  &-bottom {
    width: 100%;
    margin-bottom: 20px;
    & > div {
      display: flex;
      width: 20%;
      margin: 0 auto;
      justify-content: space-between;
      & > div {
        width: max-content;
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
          width: 50px;
          object-fit: cover;
        }
        p {
          font-size: 14px;
          color: #fff;

          margin-top: 10px;
        }
      }
    }
  }
}

.logout {
  margin-top: 24px;
  right: 24px;
  position: absolute;
  background: linear-gradient(to right, #ff7b29, #c91222);
  padding: 8px 16px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: bold;
  font-size: 18px;
  opacity: 0.9;
}

.col-md-3 {
  padding: 0px;
  width: 500px;
  height: 750px;
  overflow: hidden; /*div里面的图片或文字放大后使此容器的大小保持不变*/
}
.col-md-3 .move {
  transition: all 0.6s; /*属性改变所需要的时间*/
  width: 100%;
  height: 100%;
}
.col-md-3 .move:hover {
  transform: scale(1.4); /*缩小或放大的倍数*/
}

.card {
  width: 100%;
  height: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 12%;
  margin-bottom: 5%;
}
</style>
